<!-- npm install x-data-spreadsheet -->
<template>
  <div id="x-spreadsheet-demo"></div>
</template>

<script>
import Spreadsheet from "x-data-spreadsheet";
import zhCN from "x-data-spreadsheet/src/locale/zh-cn";
import { isEmpty } from 'lodash'
// 这个是用来处理传进来的数组对象的
export function disposeArray(originalArray) {
  const newArray = {
    len: isEmpty(originalArray) ? 0 : originalArray.length + 100,
  };

  // 提取表头信息
  const headers = Object.keys(originalArray[0]);
  newArray[0] = {
    cells: {},
  };

  // 遍历表头，并添加到格式化数组
  for (let i = 0; i < headers.length; i++) {
    newArray[0].cells[i] = { text: headers[i] };
  }

  // 遍历原始数组
  for (let i = 0; i < originalArray.length; i++) {
    const rowData = originalArray[i];

    newArray[i + 1] = {
      cells: {},
    };

    let j = 0;
    for (const key in rowData) {
      if (Object.prototype.hasOwnProperty.call(rowData, key)) {
        newArray[i + 1].cells[j] = { text: rowData[key] };
        j++;
      }
    }
  }
  return newArray;
}
Spreadsheet.locale("zh-cn", zhCN);
export default {
  name: "xspreadsheet-demo",
  data() {
    return {
      jsondata: {
        type: "",
        label: "",
      },
      /*       myrows: [
        { name: '张三', age: '19', s1x: '123' },
        { name: '李四', age: '19', s1x: '123' },
        { name: '王二', age: '20', s1x: '123' }
      ] */
    };
  },
  computed: {
    formattedArray() {
      // 这个this.myrows就是传入的数组对象
      // rows: [
      //  { name: '张三', age: '18', s1x: '123' },
      //  { name: '李四', age: '19', s1x: '123' },
      // { name: '王二', age: '20', s1x: '123' }
      // ]
      // 因为插入表格需要特定的格式，所以封装了一个函数formatArrayToTable用来处理传入的数据来达到想要的格式，随后便可以渲染进表格
      return disposeArray(this.myrows);
    },
  },
  props: {
    myrows: {},
  },
  created() {},
  mounted() {
    this.init();
  },
  methods: {
    init() {
      const rows = this.formattedArray;

      const xs = new Spreadsheet("#x-spreadsheet-demo", {
        // 这里面的都是默认值
        // 这个是顶上的菜单是否显示 true/false
        showToolbar: true,
        // 这个是底下的菜单是否显示 true/false
        showBottomBar: true,
        // 这个是表格的线是否显示
        showGrid: true,
        view: {
          // 设置整个大的表格宽高
          height: () => 500,
          width: () => 600,
        },
        // 设置行数
        row: {
          len: 22,
          height: 30,
        },
        // 设置列数
        col: {
          // ABCDFEG...到多少
          len: 100,
          // ABCDFEG...的长度
          width: 100,
          indexWidth: 40, // 行数索引宽度
          minWidth: 60,
        },
        // 修改字体的背景颜色和内容
        style: {
          // 字体居右
          align: "right",
        },
      })
        // 想要多个表的话可以在这边插表
        .loadData([{ name: "sheet1", rows: rows }])
        .change((cdata) => {
          console.log(">>>", xs.getData());
        });

      xs.on("cell-selected", (cell, ri, ci) => {
        console.log("cell:", cell, ", ri:", ri, ", ci:", ci);
      }).on("cell-edited", (text, ri, ci) => {
        console.log("text:", text, ", ri: ", ri, ", ci:", ci);
      });
    },
  },
};
</script>

<style lang="less" scoped>
#x-spreadsheet-demo {
  //这个是底下菜单栏的长度，根据需求可以自己改变
  width: 600px;
  height: 500px;
  margin-top: 20px;
  background-color: white;
}
</style>
